import * as PIXI from "pixi.js";
import {storeToRefs} from "pinia";
import  {usePixiStore}  from '@/store/pixi'
import  {useAppStore}  from '@/store/app'

import $bus from '@/mitt'
import {container} from "@/pixi/container";

import { toRaw } from 'vue'

import $ from 'jquery'
import {gsap} from "gsap";

import {isEmptyObj} from '@/utils/index'
// 左键 平移
class Left{
    constructor() {
        this.flag = false;
    }

    setFlag(flag){
        this.flag = flag;
    }

    getFlag(){
        return this.flag
    }

    move(event, mouseControle){
        const dx = event.pageX - mouseControle.startPoint.x;
        const dy = event.pageY - mouseControle.startPoint.y;
        console.log('container',container)
        console.log(mouseControle.startPoint.x,mouseControle.startPoint.y)
        // container 平移
        container.x += dx;
        container.y += dy;

        // 平移整个wrap
        // gsap.to('.pixiWrap',{
        //     x: '+=' + dx,
        //     y: '+=' + dy,
        //     duration:0,
        //     delay: 0,
        //     onComplete:()=>{}}
        // )
        mouseControle.startPoint = { x: event.pageX, y: event.pageY }
        // container 平移打开
        mouseControle.updateDom()
    }

}

// 中键 缩放
class Center{
    constructor() {
        this.flag = false;
    }

    setFlag(flag){
        this.flag = flag;
    }

    getFlag(){
        return this.flag
    }

    move(event, mouseControle){
        const step = event.wheelDelta > 0 ? 0.1 : -0.1
        if (container.scale.x + step >= 0.1) {
            container.scale.x += step
            container.scale.y += step
        }

        mouseControle.updateDom()
    }


}

// 右键 旋转
class Right{
    constructor() {
        const texture = PIXI.Texture.from("textures/bunny.png");
        // 创建一个精灵
        this.sprite = new PIXI.Sprite(texture);

        this.flag = false;

    }

    setFlag(flag){
        this.flag = flag;
    }

    getFlag(){
        return this.flag
    }

    showRotateImg(){
        // 设置精灵的锚点
        this.sprite.anchor.set(0.5, 0.5);
        container.addChild(this.sprite);
    }

    hideRotateImg(){
        // this.sprite.alpha = 0
        container.removeChild(this.sprite);
    }

    move(event, mouseControle){
        let dx = event.pageX - mouseControle.startPoint.x;
        container.rotation += 0.01 * dx ;
        mouseControle.startPoint = { x: event.pageX, y: event.pageY }

        mouseControle.updateDom()
    }

}

// 鼠标控制器
export class MouseControle{
    constructor(showCoord) {
        this.handleDown = this.downfn.bind(this)
        this.handleUp = this.upfn.bind(this)
        this.handleMove = this.movefn.bind(this)
        this.handleWheel = this.wheelfn.bind(this)

        this.showCoord = showCoord
        this.store = usePixiStore()

        this.left = new Left()
        this.center = new Center()
        this.right = new Right()

        this.startPoint = {}

        this.down()
        this.move()
        this.up()
        this.wheel()

        // console.log('container中心位置Globalyuanshi',container.getGlobalPosition())
        this.containerOrgX = container.getGlobalPosition().x ;
        this.containerOrgY = container.getGlobalPosition().y ;



        if(this.showCoord){
            if(!$('.crood')[0]){
                let dom = $('.pixiDom')[0]?$('.pixiDom'):$('body');
                dom.append(`
                    <div class="crood">
                        <div>屏幕坐标：<span class="pageX">0</span>, <span class="pageY">0</span></div>
                        <div>pixi坐标：<span class="pixiX">0</span>, <span class="pixiY">0</span></div>
                    </div>
                `)
            }
        }else{
            if($('.crood')[0]){
                $('.crood').remove()
            }
        }

    }

    down(){
        window.addEventListener("mousedown",this.handleDown)
    }

    // event.button 0  左键   1  中   2   右键
    downfn(event) {
        if(event.button == 0){
            this.left.setFlag(true)
        }
        else if(event.button == 1){
            this.center.setFlag(true)
        }
        else if(event.button == 2){
            this.right.setFlag(true)
        }
        this.startPoint = { x: event.pageX, y: event.pageY }

        // 点击控制台显示坐标
        if(this.showCoord){
            let store = useAppStore()
            let { zoomRatio, zoomRatioW } = storeToRefs(store)
            let PixiDomTop = $('.pixiDom').offset().top;
            let PixiDomLeft = $('.pixiDom').offset().left;
            // console.log('屏幕坐标',parseInt(event.pageX/zoomRatioW.value), parseInt(event.pageY/zoomRatio.value) )
            // console.log('pixi坐标',parseInt((event.pageX - PixiDomLeft)/zoomRatioW.value), parseInt((event.pageY - PixiDomTop)/zoomRatio.value) )

            $('.pageX').html( parseInt(event.pageX/zoomRatioW.value))
            $('.pageY').html( parseInt(event.pageY/zoomRatio.value))

            $('.pixiX').html(parseInt((event.pageX - PixiDomLeft)/zoomRatioW.value))
            $('.pixiY').html(parseInt((event.pageY - PixiDomTop)/zoomRatio.value))
        }
    }

    move(){
        window.addEventListener("mousemove", this.handleMove)
    }

    movefn(event){
        if(this.left.getFlag()){
            this.left.move(event,this)
        }
        if(this.center.getFlag()) {
            // center键盘按下 move不需要缩放
            // this.center.move(event,this)
        }
        if(this.right.getFlag()) {
            this.right.move(event,this)
            // this.right.showRotateImg()  // 显示右键提示图片
        }

    }

    up(){
        window.addEventListener("mouseup",this.handleUp)
    }

    upfn(event){
        if(event.button == 0){
            this.left.setFlag(false)
        }
        else if(event.button == 1) {
            this.center.setFlag(false)
        }
        else if(event.button == 2){
            this.right.setFlag(false)
            // this.right.hideRotateImg() // 隐藏右键提示图片
        }
    }

    wheel(){
        window.addEventListener("mousewheel", this.handleWheel)
    }
    wheelfn(event){
        this.center.move(event,this)
    }

    updateDom(){
        let { currentWidth,currentHeight,canvas2Dcontainer } =  storeToRefs(this.store)
        // console.log(container.x - this.containerOrgX)
        // console.log('container中心位置Global',container.x - this.containerOrgX , container.y - this.containerOrgY)
        canvas2Dcontainer.value.forEach(el=>{
            // console.log('container的偏移后', container.x)
            // console.log('缩放系数',container.scale)
            // console.log('bgcontainer中心位置',container.getGlobalPosition().x - currentWidth.value/2,container.getGlobalPosition().y - currentHeight.value/2)
            // console.log('旋转',container.rotation)

            $bus.emit('domSprite', Object.assign(
                {},
                {
                    rotate:container.rotation,
                    dom:el
                },
                container.scale,
                // container.getGlobalPosition()
                {
                    // x:container.x - this.containerOrgX,
                    // y:container.y - this.containerOrgY
                    x:this.containerOrgX,
                    y:this.containerOrgY
                }
            ));
        })
    }


    destroy(){
        window.removeEventListener('mousedown',this.handleDown)
        window.removeEventListener('mouseup', this.handleUp)
        window.removeEventListener('mousemove', this.handleMove)
        window.removeEventListener("mousewheel", this.handleWheel)
    }

    static init(params){
        let showCoord = false;
        if(!params || (isEmptyObj(params)) ){
            showCoord = false;
        }else{
            showCoord = params.showCoord;
        }

        return new MouseControle(showCoord)

        let store = usePixiStore()
        let { _mouseControle } = store
        if(_mouseControle){
            _mouseControle.down()
            _mouseControle.move()
            _mouseControle.up()
            _mouseControle.wheel()
            return toRaw(_mouseControle)
        }else{
            store.changeMouseControle(new MouseControle(showCoord))
            return toRaw(store._mouseControle)
        }
    }
}







